<script setup lang="ts">
import { ref, watch } from 'vue'
import { markdown } from '@/utils/markdownSetup'
import SimpleTop from '@/components/chat/icons/SimpleTop.vue'
import SimpleBottom from '@/components/chat/icons/SimpleBottom.vue'
import Thinking from '@/components/chat/Thinking.vue'

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  streaming: {
    type: Boolean,
    default: false
  }
})

const thinking = ref(false)
const activeThink = ref(true)
const thinkText = ref('')
const answerText = ref('')
watch(
  () => props.text,
  value => {
    if (value) {
      const isThink = value.startsWith('<think>')
      let thinkEnd = value.indexOf('</think>')
      if (isThink) {
        if (thinkEnd === -1) {
          thinkEnd = value.length
          thinking.value = true
        } else {
          thinking.value = false
        }
        thinkText.value = value.substring(7, thinkEnd).trim()
        answerText.value = value.substring(thinkEnd + 8).trim()
      } else {
        answerText.value = value
      }
    }
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div class="chat-content">
    <div class="think" v-if="thinkText">
      <div
        :class="['think-button', activeThink ? 'active' : '']"
        @click="activeThink = !activeThink"
      >
        <span class="label">思考过程</span>
        <i>
          <SimpleTop v-if="activeThink" />
          <SimpleBottom v-else />
        </i>
      </div>
      <div :class="['think-content-wrapper', activeThink ? 'active' : 'not-active']">
        <div class="think-content">
          {{ thinkText }}
        </div>
      </div>
      <Thinking v-if="thinking && props.streaming && !activeThink" />
    </div>
    <div class="answer" v-html="markdown.render(answerText)"></div>
  </div>
</template>

<style scoped>
.think {
  font-size: 14px;
}

.think-button {
  font-size: 0.94em;
  width: fit-content;
  padding: 6px 0;
  text-align: center;
  color: var(--chat-primary-color);
  cursor: pointer;
  border-radius: 5px;
  user-select: none;
}

.think-button i {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}

.think-button i svg {
  fill: var(--chat-primary-color);
  width: 1.2em;
  height: 1.2em;
}

.think-button:hover {
  color: var(--chat-primary-color);
}

.think-button.active {
  color: var(--chat-primary-color);
}

.think-content {
  margin: 0 5px;
  border-left: #ddd 2px solid;
  padding-left: 10px;
  min-height: 0;
  overflow: hidden;
  font-size: 1em;
  color: #888 !important;
  background-color: transparent !important;
  white-space: pre-wrap;
  line-height: 1.4;
}

.think-content-wrapper {
  display: grid;
  transition: grid-template-rows 0.4s ease-in-out;
  padding-bottom: 10px;
}

.think-content-wrapper.not-active {
  grid-template-rows: 0fr !important;
}

.think-content-wrapper.active {
  grid-template-rows: 1fr !important;
}

.answer {
  box-sizing: border-box;
  margin: 0 auto;
  line-height: 2.1;
  font-size: 15px;
}

:deep(pre) {
  white-space: pre-wrap;
  word-wrap: break-word;
}

:deep(pre:not(.code)) {
  color: #fff;
  background-color: #181818;
  border-radius: 8px;
  font-size: 0.92em;
  margin: 10px 0;
}

:deep(.code-toolbar) {
  padding: 4px 14px;
  background-color: #424242;
  color: #fff;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  align-items: center;
  user-select: none;
}

:deep(.code-toolbar button) {
  color: #fff;
  font-size: 0.9em;
  padding: 0 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

:deep(pre.code) {
  color: #fff;
  padding: 8px 15px;
  font-size: 0.96em;
  line-height: 1.6;
}

:deep(strong) {
  font-weight: bold;
}

:deep(h1) {
  font-size: 1.8em;
}

:deep(h2) {
  font-size: 1.6em;
}

:deep(h3) {
  font-size: 1.4em;
}

:deep(h4) {
  font-size: 1.3em;
}

:deep(h5) {
  font-size: 1.2em;
}

:deep(h6) {
  font-size: 1.1em;
}

:deep(:not(pre) > code) {
  background-color: #ececec;
  padding: 3px 6px;
  border-radius: 4px;
  margin: 0 4px;
  font-family: 'Menlo', 'Roboto Mono', 'Courier New', 'Courier', monospace, 'Inter', sans-serif;
  font-size: 0.9em;
  font-weight: 600;
}
</style>
